<template>
  <div class="container">
    <!-- 上栏 -->
    <div class="top-bar">
      <!-- 左栏 -->
      <div class="left-column">
        <goods_category_cal chartId="left-chart" />
      </div>
      <!-- 右栏 -->
      <div class="right-column">
        <goods_category_cal_histogram chartId="right-chart" />
      </div>
    </div>
    <!-- 下栏 -->
    <div class="bottom-bar">
<!--      <ChartComponent chartId="bottom-chart" />-->
    </div>
  </div>
</template>

<script>
import goods_category_cal from '@/views/goods_manage/cal_count/goods_category_cal.vue'; // 假设你有一个单独的图表组件
import goods_category_cal_histogram from '@/views/goods_manage/cal_count/goods_category_cal_histogram.vue'; // 假设你有一个单独的图表组件

export default {
  name: 'App',
  components: {
    goods_category_cal,
    goods_category_cal_histogram
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.top-bar {
  display: flex;
  flex: 1;
}
.left-column, .right-column {
  flex: 1;
  padding: 20px;
  box-shadow: inset 0 0 5px #ccc;
}
.bottom-bar {
  flex: 1;
  padding: 20px;
  box-shadow: inset 0 0 5px #ccc;
}
</style>
